<template>
  <div :id="id"></div>
</template>

<script>
import { Chart } from '@antv/g2';
export default {
  name: "Bar_chart",
  props: {
    id:{
      type:String,
      required: true,
    },
    width: {
      // 定义接收的类型 还可以定义多种类型 [String, Undefined, Number]
      // 如果required为true,尽量type允许undefined类型，因为传递过来的参数是异步的。或者设置默认值。
      type: Number,
      // 定义是否必须传
      required: false,
      // 定义默认值
      default: 500
    },
    height: {
      type: Number,
      default: 500
    },
  },
  mounted() {
    this.getPlot()
  },
  methods: {
    getPlot() {
      const data = require('@/assets/data/Statistics_for_ASMs_in_tissues.json');

      const chart = new Chart({
        container: this.id,
        width: this.width,
        height: this.height,
        autoFit: true,
      });

      chart
          .interval()
          .data(data)
          .encode('x', 'Tissue')
          .encode('y', 'Number')
          .encode('color', 'Cancer_normal')
          .transform({ type: 'dodgeX' })
          .axis('y', { labelFormatter: '~s' })
          .interaction('elementHighlight', { background: true });

      chart.render();

    }
  }
}
</script>

<style scoped>

</style>
